<template>
  <div>
    <NumberDiv :sesstingList="sesstingList" />

    <div class="settings" @click="drawer = true">
      <svg-icon class="icon" icon-class="settings"></svg-icon>
    </div>

    <!-- 设置配置项 -->
    <el-drawer v-model="drawer" :close-on-click-modal="true"  title="筛选配置" direction="rtl">
      <el-form>
        <el-form-item label="是否计算吃单">
          <el-select v-model="takeOrder" style="width: 240px">
            <el-option label="计算吃单" value="1"></el-option>
            <el-option label="不计算吃单" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-checkbox-group v-model="sesstingList" @change="changeCheck">
          <el-form-item v-for="item in numberList" :label="item.title">
            <el-checkbox v-for="item2 in item.list" :label="item2.title" :value="item2" />
          </el-form-item>
        </el-checkbox-group>
      </el-form>
    </el-drawer>
  </div>
</template>

<script setup>
import NumberDiv from './homeComponents/number.vue';
const drawer = ref(false);

const takeOrder = ref();
const numberList = reactive([
  {
    title: '支付状态',
    list: [
      {
        title: '风险订单',
        info: {
          number: 20,
          rate: 10,
          icon: 'total_order'
        }
      }
    ]
  },
  {
    title: '争议状态',
    list: [
      {
        title: '争议中',
        info: { number: 20, rate: 10, icon: 'total_order' }
      },
      {
        title: '争议成功',
        info: { number: 20, rate: 10, icon: 'total_order' }
      },
      {
        title: '争议失败',
        info: { number: 20, rate: 10, icon: 'total_order' }
      }
    ]
  },
  {
    title: '退款状态',
    list: [
      {
        title: '退款中',
        info: { number: 20, rate: 10, icon: 'refunding' }
      },
      {
        title: '退款成功',
        info: { number: 20, rate: 10, icon: 'refund_success' }
      },
      {
        title: '退款失败',
        info: { number: 20, rate: 10, icon: 'refund_error' }
      }
    ]
  },
  {
    title: '物流状态',
    list: [
      {
        title: '未推送',
        info: { number: 20, rate: 10, icon: 'total_order' }
      },
      {
        title: '推送成功',
        info: { number: 20, rate: 10, icon: 'total_order' }
      },
      {
        title: '推送失败',
        info: { number: 20, rate: 10, icon: 'total_order' }
      }
    ]
  }
]);
const sesstingList = ref([]);
const changeCheck = () => {
  console.log(sesstingList);
};
</script>

<style lang="scss" scoped>
.settings {
  width: 50px;
  height: 50px;
  background-color: var(--el-color-primary-light-3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: #fff;
  cursor: pointer;
  position: fixed;
  right: 50px;
  bottom: 10vh;
  z-index: 999;
  animation: moveRotate 2s linear infinite;
}

@keyframes moveRotate {
  to {
    transform: rotate(360deg);
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
  }

  from {
    transform: rotate(0);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  }
}
</style>
